import {
defineStore,createPinia
} from 'pinia'
import { App} from "vue";
import { AppRouteModule } from "/@ts/router/types";
import { SwitchColor } from "/@ts/hooks/theme";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { icons } from "/@ts/components/icon/index";
import { routerPush } from "../hooks/route";
import { setLocalStorage } from "../hooks/storage";
import { useCssVar } from "@vueuse/core";
import theme from "/@ts/defaultValue/theme";
const colorPrimary = useCssVar("--el-color-primary");
// 内容背景色
const bodyBg = useCssVar("--bodyBg");
export const useIndexStore = defineStore('index', {
 
state: () => ({
  icons:[],
      baseRouters: [], //路由列表 可前端写死,可后端返回
      navTitleColorFont:theme.navTitleColorFont,
      isFull: false, //是否通栏
      navIsTo: false, //导航栏是否顶部
      activeColor: "",
      projectName:import.meta.env.VITE_PROJECT, //项目标题
      BreadcrumbList: [], //面包屑
      tagPages: [], //导航标签页
      currentTag: 0, //当前选中的标签索引值
      menuActiveName: "/workbench", //当前菜单默认选中菜单
      refresh: false, //刷新状态 false 刷新结束
      themeCurrentMenuItem: theme.themeMenu,//当前菜单主题配色
      themeCurrentNavItem: theme.themeNav, //当前导航主题配色
      themeColor: theme.themeColor, //这里的初始化的值与 init.scss HTML的值保持一直
}),
getters: {
    getIcons() {
        return this.icons;
    },
    getBaseRouters() {
        return this.baseRouters;
    },
    getNavTitleColorFont() {
        return this.navTitleColorFont;
    },
    getIsFull() {
        return this.isFull;
    },
    getNavIsTo() {
        return this.navIsTo;
    },
    getActiveColor() {
        return this.activeColor;
    },
    getProjectName() {
        return this.projectName;
    },
    getBreadcrumbList() {
        return this.BreadcrumbList;
    },
    getTagPages() {
        return this.tagPages;
    },
    getCurrentTag() {
        return this.currentTag;
    },
    getMenuActiveName() {
        return this.menuActiveName;
    },
    getRefresh() {
        return this.refresh;
    },
    getThemeCurrentMenuItem() {
        return this.themeCurrentMenuItem;
    },
    getThemeCurrentNavItem() {
        return this.themeCurrentNavItem;
    },
    getThemeColor() {
        return this.themeColor;
    },
    },
    actions:{
        setIcons(value: any) {
            this.icons =  value;
        }, 
        setBodybg(value: any)
        {
            bodyBg.value = value;
            setLocalStorage("bodyBg", value);
        },
        setThemeColor(value: string[]) {
                 this.themeColor = value;
                  document.documentElement.style.setProperty("--color-red", value[0]);
                  document.documentElement.style.setProperty("--color-green", value[1]);
                  document.documentElement.style.setProperty("--color-blue", value[2]);
                  colorPrimary.value =`rgba(${value.join(",")})`;
                  let light = value.filter((item,index)=>index<3);
                  const primaryLight5 = useCssVar("--el-color-primary-light-5");
                  const primaryLight3 = useCssVar("--el-color-primary-light-3");
                  const primaryLight2 = useCssVar("--el-color-primary-dark-2");
                  
                  primaryLight5.value = `rgba(${light.join(",")},0.5)`;
                  primaryLight3.value = `rgba(${light.join(",")},0.7)`;
                  primaryLight2.value = `rgba(${value.join(",")})`;
                  setLocalStorage("themeColor", value);
        },
        setIsFull(value: boolean) {
            this.isFull = value;
            setLocalStorage("isFull", value);
        },
        setnavIsTo(value: boolean) {
            this.navIsTo = value;
            setLocalStorage("navIsTo", value);
        },
        setThemeCurrentNavItem(value: SwitchColor) {
            this.themeCurrentNavItem = value;
            setLocalStorage("themeNav", value);
        },
        setNavTitleColorFont(value: string) {
            this.navTitleColorFont = value;
            setLocalStorage("navTitleColorFont", value);
        },
        setThemeCurrentMenuItem(value: SwitchColor) {    
            this.themeCurrentMenuItem = value;
            setLocalStorage("themeMenu", value);
        },
        setActiveColor(value: string) {
            this.activeColor = value;
            setLocalStorage("activeColor", value);
        },
        setRefresh() {
            this.refresh = true;
            setTimeout(() => {
                this.refresh = false;
            }, 100);
        },
        setMenuActiveName(value: string) {
            this.menuActiveName = value;
        },
        setCurrentTag(value: number) {
            this.currentTag = value;
        },
        setBreadcrumbList(value: AppRouteModule[]) {
            this.BreadcrumbList = value;
        },
        setTagPages(value: AppRouteModule) {
            if (this.tagPages.some((v) => v.path == value.path)) {
                return;
            }
            this.tagPages.push(value);
            
        },
        setCloseTagPages(value: number) {
            this.tagPages.splice(value, 1);
        routerPush(this.tagPages[this.tagPages.length - 1]);
        },
        MoreCloseTagPages(value: AppRouteModule[]) {
            this.tagPages = value;
            let data = this.tagPages[this.tagPages.length - 1];
            routerPush(data);
        }
    }
})

/**
 * 挂载到vue实例函数
 * @param app vue实例
 */
export function setupStore(app: App<Element>) {
  app.use(createPinia());
//   let data = [];
//   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
//     let name = key.substring(0, 1).toLowerCase() + key.substring(1);
//     data.push(name);
//     app.component(key, component);
//   }
//   const indexStore = useIndexStore();
//   indexStore.setIcons(data);
}
